<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>附表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <link rel="stylesheet" href="static/lib/iview/iview.css">
    <link rel="stylesheet" href="static/css/diy/fubiao.css">

    <script src="static/js/jquery-3.3.1.min.js"></script>
    <script src="static/js/vue.min.js"></script>
    <script src="static/lib/iview/iview.min.js"></script>
    <script src="static/lib/iview/locale/zh-CN.js"></script>
    <script src="static/js/public.js"></script>

    <script src="static/js/diy/fubiaoData.js"></script>
    <style media="print">
        .noprint {
            display: none
        }

    </style>
    <style>
        [v-cloak] {
            display: none;
        }

    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="noprint">
        <i-button type="info" @click="print()">打印</i-button>
    </div>
    <div>
        <table class="diy-table" style="width: 3000px;">
            <thead>
            <tr>
                <template v-for="item in tHead">
                    <th :width="tableWidth">{{item}}</th>
                </template>
            </tr>
            </thead>
            <tbody>
            <tr>
                <template v-for="item in tLog">
                    <td>{{item}}</td>
                </template>
            </tr>
            <tr>
                <td>工法</td>
                <template v-for="item in tWork">
                    <template v-if="item.length>1">
                        <table>
                            <tr>
                                <template v-for="j in item">
                                    <td>{{j.workName}}</td>
                                </template>
                            </tr>
                        </table>
                    </template>
                    <template v-else>
                        <td>{{item.length===0?'':item[0].workName}}</td>
                    </template>
                </template>
            </tr>
            <tr>
                <td>长度</td>
                <template v-for="item in tWork">
                    <template v-if="item.length>1">
                        <table>
                            <tr>
                                <template v-for="j in item">
                                    <td>{{j.howLong}}</td>
                                </template>
                            </tr>
                        </table>
                    </template>
                    <template v-else>
                        <td>{{item.length===0?'':item[0].howLong}}</td>
                    </template>
                </template>
            </tr>
            <tr>
                <td>铺轨</td>
                <template v-for="item in tTotalLong">
                    <td :colspan="item.span">{{item.value}}</td>
                </template>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    const m_apis = {
        getData() {
            return 'static/js/diy/fubiaoData.json'
        },
    };
    let vu = new Vue({
        el: '#app',
        data: {
            apis: m_apis,
            allData: [],
            tableWidth: 65,
            tHead: [],
            tLog: [],
            tWork: [],
            tWorkName: [],
            tWorkLong: [],
            tTotalLong: [{span: 1}, {span: 6}, {span: 4}, {span: 6}, {span: 7}, {span: 9}, {span: 2}, {
                span: 6,
                value: 790
            }, {span: 1}, {span: 1}, {span: 1}], // span表示合并多少列
            dtCols: []
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                this.loadData();
            },
            loadData() {
                PB.showLoading();
                let loadAllData = new Promise((resolve, reject) => {
                    $.getJSON(this.apis.getData()).then(data => {
                        this.allData = data;
                        resolve();
                    }).catch(err => {
                        PB.hideLoading();
                        reject();
                    });
                });

                Promise.all([loadAllData]).then(d => {
                    this.fmtData();
                    PB.hideLoading();
                })
            },
            fmtData() {
                this.tHead.push('工程名称');
                this.tLog.push('工程概况');

                this.allData.forEach(q => {
                    this.tHead.push(q.name);
                    this.tLog.push(q.log);
                    let arrWork = [];
                    q.work.forEach(o => {
                        if (o.workName) {
                            arrWork.push({
                                workName: o.workName,
                                howLong: o.howLong
                            });
                        }
                    });
                    this.tWork.push(arrWork);
                });

                let tempIndx = 0, tempSum = 0;
                this.tTotalLong.forEach(q => {
                    if (!q.value) {
                        tempSum = 0;
                        for (let i = 0; i < q.span; ++i) {
                            this.allData[tempIndx + i].work.forEach(o => {
                                tempSum += o.howLong;
                            });
                        }
                        q.value = tempSum;
                    }


                    tempIndx += q.span;
                });
            }
        }
    });
</script>
</body>
</html>